<template>
    <div class="welcome">
        <el-card class="box-card">
             <el-row style="border:#eee 1px solid">
                <el-col :span="6" >
                    <div class="welcome-button">
                        <a href="#">
                            <el-button type="default" @click="openDialog('stNewFile',true)">新建文件</el-button>
                        </a>
                        <br>
                        <a href="#">
                            <el-button type="default" @click="openDialog('stOpenFile',true)">打开文件</el-button>
                        </a>
                        <br>
                        <a href="#">
                            <el-button type="default" @click="openDialog('stTemplate',true)">打开模板</el-button>
                        </a>
                    </div>
            
                </el-col>
                <el-col :span="18">
                    <img src="http://img.zcool.cn/community/01f8e8555aa5f80000009af00d986f.jpg@1280w_1l_2o_100sh.jpg" alt="" width="100%">
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>

import {mapGetters,mapMutations} from 'vuex';
export default {
    methods:{
        ...mapMutations(['setDialogStatus']),
        openDialog(key,value){
            this.setDialogStatus({
               key:key,
               value:value
            });
        },
    }
}
</script>

<style>

.welcome{
    margin: auto;
    margin-top: 200px;
    width: 40%;
    text-align: center;
    height: 100%;
}
.welcome-button{
    border-right: #eee 1px solid;
}
.welcome-button .el-button{
    width: 100%;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #eee;
}
</style>
